<template>
  <!-- 首页 -->
  <div id="app" class="homeContainer">
    <!-- 回到顶部小圆球 -->
    <goTop />
    <!-- 头部容器 -->
    <!-- <tab /> -->
    <!-- 内容区 -->
    <div class="content">
      <!-- 轮播图 -->
      <swiper />
      <!-- 经营政策 -->
      <ul class="zhengCe">
        <li>
          <van-icon class="icon" name="gem-o" />
          <span>网易自营品牌</span>
        </li>
        <li>
          <van-icon class="icon" name="good-job-o" />
          <span>30天无忧退货</span>
        </li>
        <li>
          <van-icon class="icon" name="gold-coin-o" />
          <span>48小时快速退款</span>
        </li>
      </ul>
      <!-- 商品分类列表 -->
      <ul class="kingKongModule">
        <li
          v-for="(item, index) in recommend.kingKongModule.kingKongList"
          :key="index"
          class="kingKongItem"
        >
          <div class="kingKongImg">
            <img :src="item.picUrl" alt="" />
          </div>
          <span>{{ item.text }}</span>
        </li>
      </ul>
      <!-- 三元轮播图.gif -->
      <div class="threeGif">
        <img
          src="https://yanxuan.nosdn.127.net/static-union/1641365158e735c0.gif?imageView&quality=75"
          alt=""
        />
      </div>
      <!-- 新人专区 -->
      <div class="newPeople">
        <!-- 新人爱宠日 -->
        <div class="newPeople1">
          <img
            src="https://yanxuan.nosdn.127.net/static-union/1644396030499946.png?quality=75&type=webp&imageView&thumbnail=750x0"
            alt=""
          />
        </div>
        <!-- 新人福利 -->
        <div class="newPeople2">
          <img
            src="https://yanxuan.nosdn.127.net/static-union/164432251704c535.gif?imageView&quality=75"
            alt=""
          />
        </div>
      </div>
      <!-- 类目热销榜 -->
      <div class="categoryHotSellModule">
        <!-- 标题 -->
        <div class="hotRankingList">
          {{ recommend.categoryHotSellModule.title }}
        </div>
        <!-- 列表内容 -->
        <ul class="OtherRankingList">
          <!-- 第一项 -->
          <li
            v-for="(item, index) in recommend.categoryHotSellModule
              .categoryList"
            :key="index"
          >
            <div>{{ item.categoryName }}</div>
            <img :src="item.picUrl" alt="" />
          </li>
        </ul>
      </div>
      <!-- 底部两个推荐商品 -->
      <ul class="sceneLightShoppingGuideModule">
        <li>
          <div class="textBox">
            <div class="topText">超值捡漏</div>
            <div class="bottomText">买到就赚到</div>
          </div>
          <div class="imgBox">
            <img
              src="https://yanxuan-item.nosdn.127.net/3321ee2d70b1e062422b40e4cb2cc74b.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt=""
            />
            <img
              src="https://yanxuan-item.nosdn.127.net/ef41a8006bd9570ed76df11b4c02bc45.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt=""
            />
          </div>
        </li>
        <li>
          <div class="textBox">
            <div class="topText">严选众筹</div>
            <div class="bottomText">探索美与用</div>
          </div>
          <div class="imgBox">
            <img
              src="https://yanxuan-item.nosdn.127.net/3321ee2d70b1e062422b40e4cb2cc74b.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt=""
            />
            <img
              src="https://yanxuan-item.nosdn.127.net/ef41a8006bd9570ed76df11b4c02bc45.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt=""
            />
          </div>
        </li>
      </ul>
      <!-- 页面底部版权 -->
      <div class="footerBox">
        <div class="AppAndPc">
          <div>下载APP</div>
          <div>电脑版</div>
        </div>
        <div class="copyright">网易公司版权所有 @ 1997-2022</div>
        <div class="permission">食品经营许可证: JY13301080111719</div>
      </div>
    </div>
    <!-- <Footer v-show="$route.meta.showFooter" /> -->
  </div>
</template>

<script>
import swiper from "@/pages/Home/components/swiper.vue";
// import top from "@/pages/Home/components/top.vue";
import { reqHomeRecommend, reqHomeOther } from "@/api";
window.onscroll = function () {};
export default {
  name: "Home",
  data() {
    return {
      show: false, //蒙版现隐
      //推荐数据
      recommend: {
        categoryHotSellModule: {}, //类目热销榜 categoryList
        kingKongModule: [], //商品分类列表 //kingKongList
        focusList: [], //轮播图数据
        sceneLightShoppingGuideModule: [], //底部两个推荐商品
      },
    };
  },
  methods: {
    // //   去登陆
    // toLogin() {
    //   this.$router.push({
    //     path: "/login",
    //   });
    // },
    // // 切换tab栏的回调
    // hanlderTab() {
    //   console.log("tab栏切换了!!");
    //   this.$router.push({
    //     path: "/channel",
    //   });
    // },
    // 发送请求获取推荐数据
    async reqRecommend() {
      let result = await reqHomeRecommend();
      // console.log(result.data.data);
      this.recommend = result.data.data;
    },
    //点击搜索的回调
    // toSearch() {
    //   this.$router.push({
    //     path: "/search",
    //   });
    // },
  },
  mounted() {
    this.reqRecommend();
  },
  components: {
    swiper,
  },
};
</script>

<style lang="less">
// 页面容器
.homeContainer {
  // width: 100%;
  //   height: 100%;
  // height: 1500px;
  // background: pink;
  //头部容器
  .headerContainer {
    // background: #add0e9;
    // width: 100%;
    //logo和搜素框
    //tab栏
  }
  // 内容区
  .content {
    // height: 1500px;
    width: 100%;
    // background: skyblue;
    padding-bottom: 50px;
    // 轮播图
    // 政策信息
    .zhengCe {
      display: flex;
      font-size: 12px;
      justify-content: center;
      // background: rgb(226, 170, 240);
      padding: 8px 0;
      li {
        // background: rgb(241, 208, 237);
        margin: 0 12px;
        .icon {
          margin-right: 5px;
          color: red;
        }
        // span {
        // }
      }
    }
    // 商品列表
    .kingKongModule {
      display: flex;
      flex-wrap: wrap;
      // background: rgb(187, 240, 240);
      font-size: 12px;
      padding-left: 6px;
      .kingKongItem {
        height: 78px;
        // background: rgb(156, 240, 198);
        padding: 8px;
        margin-right: 2px;
        margin-bottom: 2px;
        .kingKongImg {
          img {
            width: 55px;
            height: 55px;
          }
        }
        span {
          text-align: center;
        }
      }
    }
    //三个gif
    .threeGif {
      img {
        height: 160px;
        background-size: 100% 100%;
      }
    }
    //新人专区
    .newPeople {
      height: 170px;
      background: #eeeeee;
      //新人爱宠日
      .newPeople1 {
        img {
          height: 47px;
          // background: rgb(240, 138, 168);
          border-radius: 5px;
          margin-top: 5px;
        }
      }
      //新人福利
      .newPeople2 {
        width: 375px;
        img {
          height: 107px;
          width: 375px;
        }
      }
    }
    // 类目热销榜
    .categoryHotSellModule {
      // background: rgb(151, 250, 233);
      padding: 10px;
      .hotRankingList {
        font-size: 16px;
        // background: rgb(185, 206, 250);
        padding-bottom: 10px;
      }
      .OtherRankingList {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        li {
          background: #f5f5f5;
          margin-right: 4px;
          margin-bottom: 4px;
          display: flex;
          flex-wrap: wrap;
          width: 83px;
          height: 90px;
          div {
            // background: #3c61a0;
            margin-left: 10px;
          }
          img {
            margin-left: 10px;
            width: 60px;
            height: 60px;
          }
          &:nth-child(1) {
            width: 170px;
            height: 100px;
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            font-size: 14px;
            background: #f9f3e4;
            div {
              width: 80px;
              height: 100px;
              text-align: center;
              line-height: 100px;
              position: absolute;
              left: -10px;
            }
            img {
              width: 100px;
              height: 100px;
              position: absolute;
              right: -10px;
            }
          }
          &:nth-child(2) {
            font-size: 14px;
            width: 170px;
            height: 100px;
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            background: #ebeff6;
            div {
              width: 80px;
              height: 100px;
              text-align: center;
              line-height: 100px;
              position: absolute;
              left: -10px;
            }
            img {
              width: 100px;
              height: 100px;
              position: absolute;
              right: -10px;
            }
          }
        }
      }
    }
    //底部俩个商品的盒子
    .sceneLightShoppingGuideModule {
      // background: rgb(222, 247, 153);
      display: flex;
      justify-content: space-between;
      width: 92%;
      margin-left: 4%;
      li {
        background: #f5f5f5;
        // margin-right: 2px;
        padding: 10px;
        .textBox {
          .topText {
            font-size: 14px;
            margin-bottom: 2px;
          }
          .bottomText {
            font-size: 10px;
            color: #3c61a0;
          }
        }
        .imgBox {
          img {
            width: 75px;
            height: 75px;
          }
        }
      }
    }
    //页面底部版权
    .footerBox {
      margin-top: 10px;
      background: #414141;
      padding: 20px 40px 10px 40px;
      .AppAndPc {
        display: flex;
        justify-content: space-between;
        // background: rgb(210, 243, 194);
        margin-bottom: 16px;
        padding: 0 40px;
        color: #fff;
        div {
          width: 86px;
          height: 31px;
          background: #414141;
          text-align: center;
          line-height: 31px;
          font-size: 10px;
          border: 1px solid #999;
          border-radius: 5px;
        }
      }
      .copyright {
        text-align: center;
        // background: rgb(153, 238, 231);
        font-size: 12px;
        color: #999;
      }
      .permission {
        text-align: center;
        // background: rgb(159, 245, 116);
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
